<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>字典管理</span>
      <div>
        
        <el-button type="primary"  @click="joinexportlist">新增字典</el-button>
   
        <el-button @click="chengecz"  icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
         
            <el-input v-model="input1" class="chengeinout" clearable placeholder="请输入中文名称查询"></el-input>

            <el-input v-model="input2"   class="chengeinout" clearable placeholder="请输入英文名称查询"></el-input>
      
            <el-input v-model="input3"  class="chengeinout" style="margin-right:380px" clearable placeholder="请输入字典标签查询"></el-input>
          

            <el-button class="chengebutton" @click="chengess" type="primary">搜索</el-button>
            <el-button class="chengebutton" @click="chengecz" type="primary">重置</el-button>


        </div>
      </div>
   
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :show-overflow-tooltip="true"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
           v-loading="loading"
        >
           <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column  type="index" width="100" label="序号"></el-table-column>
          
           <el-table-column  property="name" width="150" label="中文名称"></el-table-column>
           <el-table-column  property="type" width="150" label="英文名称"></el-table-column>


            <el-table-column   width="400" label="字典标签" >
            <template slot-scope="scope">
              <div class="chengebq">
                  <div class="chengebq1" v-for="item in scope.row.optionsList " :key="item.value"> {{item.options}}  </div>
              </div>
            </template>
          </el-table-column>

           <!-- <el-table-column  property="wfUserName" label="更新人员"></el-table-column> -->
             <el-table-column  property="createTime" align="center"  label="更新时间"></el-table-column>
       

          <el-table-column fixed="right" align="left"  label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="chengexq(scope.row)" >编辑</el-button>
              <el-button type="text"  size="small" @click="chengecx(scope.row)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="size"
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div> -->
      </div>


      <el-dialog
        title="删除"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <h3>确定删除此字典项吗？</h3>
        <span>删除后将无法找回数据</span>


        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="chengeqrhx">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
  :title="title == 1?'新增字典':'编辑字典'"
  :visible.sync="dialogVisible1"
  width="40%"
  :before-close="handleClose1">


  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="cname"
    label="中文名"
    :rules="[
      { required: true, message: '请输入中文名', trigger: 'blur' }
    ]"
  >
    <el-input v-model="dynamicValidateForm.cname"></el-input>
  </el-form-item>
  <el-form-item
    prop="yname"
    label="英文名"
    :rules="[
      { required: true, message: '请输入英文名', trigger: 'blur' }
     
    ]"
  >
    <el-input v-model="dynamicValidateForm.yname"></el-input>
  </el-form-item>

   <el-form-item
    label="字典标签"
  >
  </el-form-item>
 <el-form-item

  >

  <el-row>
  <el-col :span="8">
    <div class="chengtitle1">字典内容</div>
  </el-col>
  <el-col :span="6">
  
    <div class="chengtitle1">字典值</div>
  </el-col>
  <el-col :span="6">
    <div class="chengtitle1">排序</div>
  </el-col>
  <el-col :span="4">
    <div class="chengtitle1">操作</div>
  </el-col>
</el-row>

  </el-form-item>

  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :key="domain.key"
 
  >
<el-row>
  <el-col :span="8">
    <el-form-item
    :prop="'domains.' + index + '.options'"
    :rules="{
      required: true, message: '字典内容不能为空', trigger: 'blur'
    }"
    >
     <el-input style="width:140px" v-model="domain.options" placeholder="请输入字典内容"></el-input>
    </el-form-item>

  </el-col>
  <el-col :span="6">
    <el-form-item
    :prop="'domains.' + index + '.code'"
    :rules="{
      required: true, message: '字典值不能为空', trigger: 'blur'
    }"
    >
     <el-input type="number" style="width:100px" v-model="domain.code"></el-input>
    </el-form-item>

  </el-col>
  <el-col :span="6">

    <el-form-item
    :prop="'domains.' + index + '.sorted'"
    :rules="{
      required: true, message: '排序不能为空', trigger: 'blur'
    }"
    >
     <el-input type="number" style="width:100px" v-model="domain.sorted"></el-input>
    </el-form-item>

  </el-col>
  <el-col :span="4">
    <i class="el-icon-remove-outline" style="margin:0 10px" @click.prevent="removeDomain(domain)"></i>
    <i class="el-icon-circle-plus-outline" @click="addDomain" ></i>

  </el-col>
</el-row>


  </el-form-item>
  <!-- <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item> -->
</el-form>



  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose1">取 消</el-button>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">确 定</el-button>
  </span>
</el-dialog>
    
       
    </div>
 
</template>

<script>
import {hxrecord,dictionarysdsadList} from "@/api/api";
import md5 from "js-md5";
import axios from 'axios'
import qs from 'qs'
export default {
  name:'item-one',
  data: function() {
    return {
        loading: false,
        userInfo:JSON.parse(sessionStorage.getItem('userInfo')),
        dialogVisible:false,
        dialogVisible1:false,
        merchantarr:[],
        title:1,
        page: 1,
        size: 10,
        total:100,
        input1:'',
        input2:'',
        input3:'',
        merchantId:0,
        ss:{},
        dynamicValidateForm: {
          domains: [{
            options: '',
            code:'',
            sorted:''
          }],
          cname: '',
          yname:''
        },
        ids:[],
        id:''


    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);
 

      this.changelist()
  

  },
  methods: {
 

     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            



var url = "";
var data = {}

if(this.title == 1){
  url = process.env.VUE_APP_BASE_URL + '/product/v31/sbapi/dictionary/batchSave'

 let arry = this.dynamicValidateForm.domains
 let arryNew = []
      arry.map((item, index) => {
        arryNew.push(Object.assign({}, item, { name: this.dynamicValidateForm.cname, type:this.dynamicValidateForm.yname}))

      })


data = {

  dictionary:arryNew
}

}else{

   let arry = this.dynamicValidateForm.domains
 let arryNew = []
      arry.map((item, index) => {
        arryNew.push(Object.assign({}, item, { name: this.dynamicValidateForm.cname, type:this.dynamicValidateForm.yname}))

      })
  url = process.env.VUE_APP_BASE_URL + '/product/v31/sbapi/dictionary/update'

  data = {
    dictionary:arryNew,
    ids:this.ids
  }

}
console.log('tagss', data)

axios({
        url,
        data: JSON.stringify(data),
        method: 'POST',
        headers: {
          // 'Content-Type':'text/plain',
          'Content-Type': 'application/json',
        } }).then(res => {
          this.changelist()
          this.dialogVisible1 = false
   })
} else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          console.log('tag', item)
          this.ids.push(item.id)
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
           options: '',
            code:'',
            sorted:'',
        
        });
      },

  
 
    //详情
    chengexq(item){
     this.dialogVisible1 = true
     this.title = 2
     this.ids = []

    this.dynamicValidateForm = {
          domains: item.optionsList,
          cname: item.name,
          yname:item.type
        }
     

    },
    //撤销
    chengecx(item){
    this.dialogVisible = true


    this.id = item.optionsList
  

    },

    //确认核销
    chengeqrhx(){

     var arryNew = []

    this.id.map((item, index) => {
        arryNew.push(item.id)

      })

      console.log('ss', arryNew)
  url = process.env.VUE_APP_BASE_URL+'/product/v31/sbapi/dictionary/delete'

axios({
             url,
             data: JSON.stringify(arryNew),
             method: 'POST',
             headers: {
                  // 'Content-Type':'text/plain',
                  'Content-Type': 'application/json',
            }
        }).then(res => {
            this.changelist()
         
   })
      
      this.dialogVisible = false

    },

    //搜索
    chengess(){
      
 
     
      let ss = {
        name:this.input1,
        type:this.input2,
        options:this.input3

      }
     
   
      dictionarysdsadList(ss).then(res=>{
      this.merchantarr=  res.data
    })
    


    },
    //重置
    chengecz(){
   
      this.input1=''
      this.input2=''
      this.input3=''
  

      this.changelist()
   
    },
    //查询列表
    changelist(){
      
    dictionarysdsadList().then(res=>{
      this.merchantarr=  res.data
    })
     
    },
    handleClose(){
        this.dialogVisible = false
    },
    handleClose1(){
        this.dialogVisible1 = false
        this.dynamicValidateForm={
          domains: [{
            options: '',
            code:'',
            sorted:''
          }],
          cname: '',
          yname:''
        }

    },
    //多选框
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
    },
      //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
     // 显示数量
    sizechange(val){

 


    // if(this.input1 == '' && this.input2 == '' && this.input3 == '' && this.input4 == '' && this.input5 == '' && this.input6 == '' && this.input7 == null ){
    //       this.size  = val
    //       this.page = 1
    //       this.changelist()
    // }else{
          this.size  = val
          this.page = 1

          let ss = {
          page:1,
          size:this.size,
          couponCode:this.input1,
          merchantName:this.input2,
          shopName:this.input3,
          channelOrderNo:this.input4,
          status:this.input5,
          wfUserName:this.input6,
          startTime:this.input7 == null ? '':this.input7[0],
          endTime:this.input7 == null ? '':this.input7[1]

      }
     
   
      hxrecord(ss).then(res=>{
        this.merchantarr = res.data.rows
        this.total = res.data.total
      })

    // }



    },
    // 分页
    handleCurrentChange(val) {
      this.page = val;
       console.log('sss', this.input7 == null)

       
    // if(this.input1 == '' && this.input2 == '' && this.input3 == '' && this.input4 == '' && this.input5 == '' && this.input6 == '' && this.input7 == null ){
    //       console.log('tag', '1111')
    //       this.page = val;
    //       this.changelist()
    // }else{
          this.page  = val
          
          
          let ss = {
          page:this.page,
          size:this.size,
          couponCode:this.input1,
          merchantName:this.input2,
          shopName:this.input3,
          channelOrderNo:this.input4,
          status:this.input5,
          wfUserName:this.input6,
          startTime:this.input7 == null ? '':this.input7[0],
          endTime:this.input7 == null ? '':this.input7[1]

      }
     
   
      hxrecord(ss).then(res=>{
        this.merchantarr = res.data.rows
        this.total = res.data.total
      })

    // }

    },
    // 跳转导出
    joinexportlist(){
      this.dialogVisible1  = true
      this.title = 1
    }
  }
};
</script>
<style scoped>
.chengebq{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.chengebq1{
  width: 18%;
  margin-right: 2%;
  margin-bottom: 5px;
  height: 25px;
  line-height: 25px;
  box-sizing: border-box;
  border: 1px solid rgba(63, 158, 255, 1);
  border-radius: 5px;
  text-align: center;
  color: rgba(63, 158, 255, 1);
}
.red{
  color: red;
}
.chengeinout{
    width: 180px;
    margin-right: 20px;
    margin-bottom: 10px;
}
.chengebutton{
    margin-left: 30px;
    padding: 0 30px;
}


.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename{
  width: 60%;
}
.servicelevel{
  width: 20%;
}
.width20{
    width: 20%;
}
.width30{
    width: 30%;
}
.red {
  color: #f9607d;
}
.stitle{
    padding: 5px 0;
    font-size: 18px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152A;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  text-align: center;
  line-height: 200%;
}
.BDname{
  width: 20%;
}
.width60{
  width: 40%;
}
.yuan{
  color: #C1C5CB;
  font-size: 12px;
  position: relative;
  left: -20px;
 
}
.green{
  width: 70px;
  background: #97C05C;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.orange{
  width: 70px;
  background: #F29C38;
  color: #fff;
   padding: 0 5px;
  border-radius: 10px;
}
.hui{
  width: 70px;
  background: #888888;
  color: #fff;
   padding: 0 5px;
  border-radius: 10px;
}
.reds{
  width: 70px;
  background: #D3362F;
  color: #fff;
   padding: 0 5px;
  border-radius: 10px;
}
.blue{
  width: 70px;
  background: #4154AF !important;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.chengtitle1{
  width: 100%;

}
</style>